<template>
  <div>
    <div class="banner h-[200px] bg-slate-800" :style="{ background }"></div>
    <div class="text-center">
      <h1 class="mt-4 text-[2rem] font-bold">桌面应用程序模版</h1>
      <div class="mt-4 text-[1.5rem]">欢迎访问</div>
    </div>
    <div class="flex justify-evenly gap-2 p-8">
      <div class="card bg-slate-100">
        <a-button @click="chooseFile">选择文件</a-button>
        <hr class="my-4" />
        <a-textarea
          placeholder="从文件中读取到的内容"
          v-model:value="result.content"
        ></a-textarea>
        <a-button class="mt-4" @click="send">发送</a-button>
      </div>
      <div class="card bg-slate-200"></div>
      <div class="card bg-slate-300"></div>
    </div>
  </div>
</template>

<script setup lang="ts">
type FileParam = {
  path: string;
  content: string;
};
const background = ref(`rgb(30 41 59 / var(--tw-bg-opacity, 1))`);

const result = ref<FileParam>({
  content: '',
  path: '',
});
const chooseFile = () => {
  window.ipcRenderer.send('READ_FILE');
};

onMounted(() => {
  window.ipcRenderer.on('READ_FILE', (event, data: FileParam) => {
    result.value = data;
  });
});

const send = () => {
  window.ipcRenderer.send('SAVE_FILE', JSON.stringify(result.value));
};
</script>

<style lang="scss" scoped>
.card {
  flex: 1;
  height: 300px;
  padding: 1rem;
}
</style>
